<template>
  <div class="top-bar-root">
    <v-app-bar
      fixed
      class="top-bar-wrapper"
      color="rgba(255,255,255,0.5)"
      dense
      hide-on-scroll
      light
      height="75px"
      :extension-height="getHeight"
      elevation="0"
    >
      <div class="top-bar">
        <div class="button-group">
          <v-btn x-large style="font-size: 32px" text disabled>
            COVID-19
          </v-btn>
          <v-btn
            x-large
            v-for="(item, index) in firstHalfItems"
            :key="item.title"
            text
            @click="onClickItem(item, index)"
          >
            <!-- <v-icon>{{ item.icon }}</v-icon> -->
            <Avatar v-if="item.title === '个人中心'" :mode="0" :size="30" />
            <span
              v-bind:style="{
                color: activeColor[index],
                fontSize: '28px',
                textDecoration: decoration[index],
              }"
              >{{ item.title }}</span
            >
          </v-btn>
        </div>

        <div class="button-group">
          <v-btn
            x-large
            v-for="(item, index) in secondHalfItems"
            :key="item.title"
            text
            @click="onClickItem(item, index + 5)"
          >
            <v-icon>{{ item.icon }}</v-icon
            ><span style="font-size: 28px">{{ item.title }}</span>
          </v-btn>
        </div>
      </div>
      <template v-slot:extension>
        <v-tabs
          centered
          v-if="'children' in navBarItems[currIndex]"
          v-model="subIndexes[currIndex]"
          color="red"
        >
          <v-tab
            small
            v-for="(sub, index) in navBarItems[currIndex].children"
            :key="sub.title"
            @click="onClickChild(sub, index)"
            ><span style="font-family: 'Roboto'; font-size: 20px">{{
              sub.title
            }}</span></v-tab
          >
        </v-tabs>
      </template>
    </v-app-bar>
  </div>
</template>

<script>
import logoSvg from "@/assets/logo.png";
import Avatar from "./Avatar/Avatar.vue";

export default {
  components: { Avatar },
  name: "TopBar",
  data: () => ({
    logo: logoSvg,
    activeColor: ["", "", "", "", ""],
    decoration: ["", "", "", "", ""],
    items: [
      {
        title: "疫情地图",
        // icon: "mdi-map-legend",
        type: "list",
        route: "/overview/domestic",
        children: [
          {
            title: "国内疫情",
            route: "/overview/domestic",
          },
          {
            title: "国外疫情",
            route: "/overview/global",
          },
        ],
      },
      {
        title: "新闻汇总",
        // icon: "mdi-newspaper-variant-outline",
        type: "page",
        route: "/news",
      },
      {
        title: "出行政策",
        type: "page",
        route: "/policy",
      },
      {
        title: "防疫知识",
        // icon: "mdi-magnify",
        type: "page",
        route: "/knowledge",
      },
      {
        title: "讨论区",
        type: "page",
        route: "/discuss",
      },
    ],
    items_after_login: [
      {
        title: "个人中心",
        // icon: "mdi-account-circle",
        // prepend:,
        type: "list",
        children: [
          {
            title: "个人信息",
            route: "/user/center",
          },
          {
          title:"申请认证",
          route:"/manage/auth/apply"
        },
        ],
      },
      {
        title: "退出登录",
        // icon: "mdi-exit-to-app",
        type: "callback",
        func: "",
      },
    ],
    manager_user_childrens: [
      { title: "添加资讯", route: "/manage/article/create" },
      // { title: "风险国家管理", route: "/manage/int-risk" },
      // { title: "审核认证", route: "/manage/auth" },
    ],
    items_before_login: [
      {
        title: "登录",
        // icon: "mdi-login",
        type: "page",
        route: "/user/login",
        children: [],
      },
      {
        title: "注册",
        // icon: "mdi-account-plus",
        type: "page",
        route: "/user/register",
      },
    ],
    currIndex: 0,
    subIndexes: [0, 0, 0, 0, 0, 0, 0, 0],
  }),
  created() {
    this.init();
    console.log("top-bar mounted");
    this.setIndexes();
  },
  updated() {},
  computed: {
    currProminency() {
      // return true;
      // console.log(this.navBarItems[this.currIndex].children);
      return this.navBarItems[this.currIndex].children != undefined;
    },
    getHeight() {
      if (this.currProminency) return "50px";
      else return "0px";
    },
    isLogin() {
      // return true;
      return this.$store.getters.isLogin;
    },
    isManager() {
      // return true;
      return this.$store.getters.isManager;
    },
    navBarItems() {
      var ret = [];
      if (this.isLogin === true) {
        console.log("isLogin true");
        let more = this.items_after_login;
        console.log(more);
        if (this.isManager === true) {
          console.log("isManager  true");
          more[0].children.push(...this.manager_user_childrens);
        }
        ret.push(...this.items, ...more);
        return ret;
      } else ret.push(...this.items, ...this.items_before_login);
      return ret;
    },
    firstHalfItems() {
      // console.log("first half");
      // console.log(this.navBarItems);
      let tmps = [];
      tmps.push(...this.navBarItems);
      tmps.splice(5, this.navBarItems.length - 3);
      return tmps;
    },
    secondHalfItems() {
      // console.log("second half");
      // console.log(this.navBarItems);
      let tmps = [];
      tmps.push(...this.navBarItems);
      let res = tmps.splice(5, this.navBarItems.length - 3);
      // console.log("second half res");
      // console.log(res);
      return res;
    },
  },
  methods: {
    init() {
      // this.items_after_login[1].func = () => {
      //   this.openNotifications();
      // };
      this.items_after_login[1].func = () => {
        this.logOut();
      };
    },
    setIndexes() {
      console.log("method called");
      var path = window.location.hash.substring(2); //to do : 直接打开链接获取不到item
      // var path= window;
      // console.log(path);
      var success = false;
      for (var i = 0; i < this.navBarItems.length; i++) {
        if (success === true) break;
        let item = this.navBarItems[i];
        if (item.type === "page" && path === item.route) {
          console.log(item);
          this.currIndex = i;
          success = true;
          break;
        } else if (item.type === "list") {
          console.log(item);
          for (var j = 0; j < item.children.length; j++) {
            if (path === item.children[j].route) {
              this.currIndex = i;
              this.subIndexes[i] = j;
              success = true;
              break;
            }
          }
        }
      }
    },
    openNotifications() {},
    getItemColor(index) {
      console.log(index);
      return "light-blue accent-1";
      // if (index === this.currIndex) return "primary";
      // else return "plain";
    },
    onClickItem(item, index) {
      // console.log(item);

      if (item.type === "page") {
        this.activeColor[this.currIndex] = "";
        this.activeColor[index] = "red";
        // this.decoration[this.currIndex] = ""
        // this.decoration[index] = "underline"
        this.currIndex = index;
        this.$router.push(item.route);
      } else if (item.type === "callback") {
        item.func();
      } else {
        this.activeColor[this.currIndex] = "";
        this.activeColor[index] = "red";
        // this.decoration[this.currIndex] = ""
        // this.decoration[index] = "underline"
        this.currIndex = index;
        this.subIndexes[this.currIndex] = 0;
        this.$router.push(item.children[this.subIndexes[this.currIndex]].route);
      }
    },
    onClickChild(child, index) {
      // console.log(child + index);
      this.subIndexes[this.currIndex] = index;
      this.$router.push(child.route);
      // if(child)
    },
    jump() {
      this.$router.push("Home");
    },
    logOut() {
      this.$store.commit("setUser", {});
      this.$store.commit("setisLogin", false);
      this.$router.push("/overview/domestic");
    },
  },
};
</script>

<style scoped>
.theme--light.v-btn.v-btn--disabled {
  color: black !important;
}
.v-btn {
  text-transform: none;
}
.button-group {
  display: flex;
  height: 75px;
  align-items: center;
  justify-content: space-around;
}
.top-bar-root {
  /* position: absolute; */
  /* float: top; */
  /* height:100px;
  width: 100vw; */
}
.top-bar-wrapper {
  z-index: 10000;
  backdrop-filter: blur(2px);
}
.top-bar {
  /* height: 90px; */
  padding-top: 2.5px;
  width: 100vw;
  box-shadow: 0px 0px 15px -1px silver;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  /* z-index: 1000; */
}
.sub-bar {
  height: 50px;
}

.logo-image {
  display: inline-block;
  /* flex: flex-shrink; */
  width: 50px;
  /* position: absolute; */
  /* top:0 */
}
/deep/ .v-toolbar__content,
.v-toolbar__extension {
  margin: 0px !important;
  padding: 0px !important;
}
</style>
